<template>
  <div>
    <div>
      <span class="fz14">消息类型：</span>
      <el-radio-group v-model="messageType" size="mini" @change="switchTypeHandle">
        <el-radio :label="0">未读</el-radio>
        <el-radio :label="1">已读</el-radio>
        <el-radio :label="2">已删</el-radio>
        <el-radio :label="3">全部</el-radio>
      </el-radio-group>
    </div>
    <div v-show="messageSize > 0" class="message">
      <el-collapse accordion v-model="activeIndex" @change="messageChangeHandle"
           v-infinite-scroll="loadMessageList" infinite-scroll-disabled="disable" infinite-scroll-distance="50" >
        <el-collapse-item v-for="(message, index) in messageList" :key="'msg' + message.messageId" :name="index" class="message-item">
          <template slot="title">
            {{ index + 1 }} - {{ message.title }}
            <el-button v-if="message.readFlag === 0" circle @click.stop="deleteMessageHandle(message, index)" type="danger" size="mini" icon="el-icon-delete" class="delete"></el-button>
            <i v-else class="el-icon-chat-dot-square" style="margin-left: 5px; font-size: 20px; color: #84d707"></i>
          </template>
          <div>内容： {{ message.message }}</div>
          <div>创建时间： {{ message.createTime }}</div>
        </el-collapse-item>
      </el-collapse>
      <p v-show="dataLoad" class="load">加载中...</p>
    </div>
    <div v-show="!dataLoad && messageSize === 0" class="empty">
      {{ emptyMessage }}
    </div>
  </div>
</template>

<script>
  export default {
    name: "user-message-line",
    data() {
      return {
        // 用户消息列表
        messageList: [],
        // 用户消息个数
        messageSize: 0,
        // 显示的消息类型[0-未读 1-已读 2-已删 3-全部]
        messageType: 0,
        // 当前展示页码
        page: 1,
        // 当前页显示个数
        limit: 10,
        // 是否正在加载数据[true-是 false-不是]
        dataLoad: false,
        // 确认消息定时器
        timer: '',
        // 用户消息列表展开项所在用户消息列表下标
        activeIndex: ''
      }
    },
    computed: {
      /**
       * 消息列表为空时，提示的消息
       */
      emptyMessage() {
        let messageType = this.messageType;
        let message;
        switch (messageType) {
          case 0:
            message = "您当前没有未读的消息"
            break
          case 1:
            message = "您当前没有已读的消息"
            break
          case 2:
            message = "您当前没有删除的消息"
            break
          case 3:
            message = "您没有任何消息"
            break
          default:
            message = ""
            break
        }
        return message;
      },
      /**
       * 无限滚动是否可用
       * @returns {boolean} true-可用 false-不可用
       */
      disable() {
        return this.dataLoad || this.messageSize === this.messageList.length
      }
    },
    methods: {
      /**
       * 初始化用户消息列表事件
       */
      initMessageHandle() {
        if (this.messageList.length === 0) {
          this.getMessageList(false)
        }
      },
      /**
       * 获取消息列表方法
       * @param {boolean} bool 是否刷新数据列表[true-是 false-不是]
       */
      getMessageList(bool) {
        // 数据正在加载中
        this.dataLoad = true
        let userMessageFormVo = {
          messageType: this.messageType,
          page: this.page,
          limit: this.limit
        }
        this.$axios.$post('/sys/user-message/list', userMessageFormVo)
          .then(({ data:page }) => {
            if (bool) {
              this.messageList = page.list
            } else {
              this.messageList.push(...page.list)
            }
            this.messageSize = page.totalNum
          })
          .catch(() => {})
          .finally(() => {
            // 数据加载结束
            this.dataLoad = false
          })
      },
      /**
       * 动态加载用户消息列表
       */
      loadMessageList() {
        // 数据正在加载中
        this.dataLoad = true
        let userMessageFormVo = {
          messageType: this.messageType,
          page: this.page + 1,
          limit: this.limit
        }
        this.$axios.$post('/sys/user-message/list', userMessageFormVo)
          .then(({ data:page }) => {
            this.messageList.push(...page.list)
            this.messageSize = page.totalNum

            this.page += 1
          })
          .catch(() => {})
          .finally(() => {
            // 数据加载结束
            this.dataLoad = false
          })
      },
      /**
       * 消息类型选择事件
       */
      switchTypeHandle() {
        // 页码重置
        this.page = 1
        // 关闭消息列表展开项
        this.activeIndex = ''

        this.getMessageList(true)
      },
      /**
       * 用户消息列表项点击事件
       * @param activeIndex
       */
      messageChangeHandle(activeIndex) {
        // 清空定时器
        clearTimeout(this.timer)
        if (activeIndex === '') {
          return
        }
        let message = this.messageList[activeIndex]
        if (message.readFlag === 0) {
          return;
        }
        let _self = this
        // 1秒后触发事件
        this.timer = setTimeout(function () {
          _self.$axios.get('/sys/user-message/read', { params: { 'messageId': message.messageId }})
            .then(() => {
              message.readFlag = 0
            })
          console.log('111', _self.timer)
          // 清空定时器
          clearTimeout(_self.timer)
          console.log('222', _self.timer)
        }, 1000)
      },
      /**
       * 删除用户消息事件
       * @param {Object} message     用户消息信息对象
       * @param {number} activeIndex 用户消息信息所在数组下标
       */
      deleteMessageHandle(message, activeIndex) {
        let msg = '您确定要删除"' + message.title + '"消息吗?'
        this.$confirm(msg, '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          this.$axios.$delete('/sys/user-message/delete', { params: { 'messageId': message.messageId }})
            .then(() => {
              // 删除用户消息
              this.messageList.splice(activeIndex, 1)

              this.notify('success', '删除成功', '"' + message.title + '"消息删除成功')
            })
            .catch(() => {})
        })
        .catch(() => {});
      },
    }
  }
</script>

<style scoped>
  .message {
    margin-top: 10px;
    height: 310px;
    overflow: auto;
  }
  .message .message-item .delete {
    margin-left: 50px;
    display: none;
  }
  .message .message-item:hover .delete {
    display: inline;
  }
  .message .load {
    font-size: 14px;
    margin-top: 10px; text-align: center
  }
  .empty {
    color: #E6A23C;
    padding: 5em 0;
    margin-left: 5em;
  }
</style>
